<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>

    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>
    <style type="text/css">
        #all {
            width: 100%;
        }

        #header{
            width: 100%;
            height: 250px;
            /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#3778FF), to(white));*/
            background-color: #3778FF;
        }

        .div_inner {
            margin: 10px;
            margin-left: 20px;
            margin-right: 20px;
            position: relative;
            font-size: 14px;
            display: inline-block;
        }


        .span {
            display: inline-block;
            margin-left: 20px;
        }
    </style>
</head>


<body>
<div id="all">
    <div id="header">
        <div style="margin-left: 80px;padding-top: 20px;"><label style="font-weight: bold;font-family:SimHei;font-size: 20px;"><font color="white">数据看板</font></label></div>
        <div>
            <div style="width: 250px;margin-left: 80px;height: 130px;background-color: white;border-radius: 5px;margin-top: 20px;float:left;">
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">今日营业额</span>
                <span style="font-weight: bold;display: block;margin-left: 30px;padding-top: 20px">￥：1325.25</span>
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">自昨日以来:<span style="color: green"> ↗ 15.30%</span></span>
            </div>
            <div style="width: 250px;margin-left: 60px;height: 130px;background-color: white;border-radius: 5px;margin-top: 20px;float:left;">
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">支付订单数</span>
                <span style="font-weight: bold;display: block;margin-left: 30px;padding-top: 20px">233 笔</span>
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">自上月以来:<span style="color: green"> ↗ 10.30%</span></span>
            </div>
            <div style="width: 250px;margin-left: 60px;height: 130px;background-color: white;border-radius: 5px;margin-top: 20px;float:left;">
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">新增注册人数</span>
                <span style="font-weight: bold;display: block;margin-left: 30px;padding-top: 20px">69</span>
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">自上月以来:<span style="color: red"> ↘ 5.30%</span></span>
            </div>
            <div style="width: 250px;margin-left: 60px;height: 130px;background-color: white;border-radius: 5px;margin-top: 20px;float:left;">
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">今日访客数</span>
                <span style="font-weight: bold;display: block;margin-left: 30px;padding-top: 20px">233</span>
                <span style="color: #8898AA;display: block;margin-left: 30px;padding-top: 20px">自上月以来:<span style="color: green"> ↗ 11.9%</span></span>
            </div>
        </div>
    </div>
    <div>
        <div style="margin-top: 10px;margin-left: 30px;float: left;">
            <div style="margin-left: 20px;padding-top: 20px">
                <span style="display: block;padding-bottom: 10px">商品销量排行<span style="color:red;font-weight: bold">Top5</span></span>
            </div>
            <template>
                <el-table :data="tableData" border style="width: 100%;border-radius: 20px">
                    <el-table-column type="index" label="排名" align="center" width="60">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名" align="center" width="160">
                    </el-table-column>
                    <el-table-column prop="image" label="图片" width="160">
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" align="center" width="160">
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <div style="margin-top: 10px;margin-left: 80px;float: left">
            <div style="margin-left: 20px;padding-top: 20px">
                <span style="display: block;padding-bottom: 10px">商品访问排行<span style="color:red;font-weight: bold">Top5</span></span>
            </div>
            <template>
                <el-table :data="visitedData"  border style="width: 100%;border-radius: 20px">
                    <el-table-column type="index" label="排行" align="center" width="60">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名" align="center" width="160">
                    </el-table-column>
                    <el-table-column prop="image" label="图片" width="160">
                    </el-table-column>
                    <el-table-column prop="visits" label="访问量" align="center" width="160">
                    </el-table-column>
                    </el-table-column>
                </el-table>
            </template>
        </div>

    </div>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#all",
        data: {
            tableData: [],
            visitedData:[],
        },
        created() {
            this.getSoldTop5();
            this.getVisitedTop5();
        },
        methods: {
            getSoldTop5() {
                axios.get('../system/sold', {
                })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res.data.data);
                        this.tableData = res.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            getVisitedTop5() {
                axios.get('../system/visited', {
                })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res.data.data);
                        this.visitedData = res.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },

        }
    })
</script>

</html>